//获取操作对象
var fdjBox = document.querySelector('.fdj');
var middleBox = document.querySelector('.middle');
var middleImg = document.querySelector('.middle>img')
var mask= document.querySelector('.mask');
var bigBox = document.querySelector('.middle .big');
var bigImg = document.querySelector('.middle .big>img');
var smallImgs = document.querySelectorAll('.small img');

//给middle盒子绑定事件
middleBox.onmouseover = function() {
    // console.log('鼠标移入成功');
    mask.style.display = 'block';
    bigBox.style.display = 'block';
}
//给middle盒子解绑事件
middleBox.onmouseout = function() {
    // console.log('鼠标已移出');
    mask.style.display = 'none'
    bigBox.style.display = 'none'
}

//获取鼠标移动的位置
middleBox.onmousemove = function() {
    //兼容写法
    var e = e || window.event
    //计算蒙板层的位置
    var l = e.pageX - fdjBox.offsetLeft - parseInt(mask.offsetWidth/2)
    var t = e.pageY - fdjBox.offsetTop - parseInt(mask.offsetHeight/2)
    // console.log(l,t);    
    //设置边界
    var x = middleBox.offsetWidth - mask.offsetWidth
    var y = middleBox.offsetHeight - mask.offsetHeight
    // console.log(x,y);
    //图片移动距离
    var imgX,imgY

    if(l <= 0) {
        imgX = 0
        mask.style.left = '0px'
    } else if(l >= x) {
        imgX = x
        mask.style.left = x + 'px'
    } else {
        imgX = l
        mask.style.left = l + 'px'
    }

    if(t <= 0) {
        imgY = 0
        mask.style.top = '0px'
    } else if(t >= x) {
        imgY = x
      mask.style.top = y + 'px' 
    } else {
        imgY = t
        mask.style.top = t + 'px'
    }

    bigImg.style.left = -3*imgX + 'px'
    bigImg.style.top = -3*imgY + 'px'


    //小图切换
    for(let i=0;i<smallImgs.length;i++) {
        //给所有小图片添加点击事件
        smallImgs[i].onclick = function() {
        //切换小图样式
            for(let j=0;j<smallImgs.length;j++) {
                smallImgs[j].className = ''
            }
            
            smallImgs[i].className = 'active'
          
            middleImg.src = bigImg.src = smallImgs[i].src

        }
    }
}



